<template>
	<view class="address_main">
		<view class="void_show" v-if="store.state.addressList.length==0">
			<uni-icons type="location-filled" color="#eee" size="100"></uni-icons>
			<p class="tip">暂无地址,请先添加地址...</p>
		</view>
		<scroll-view :scroll-y="true" class="sele_ul" v-else>
			<view class="sele_ul_item">
				<view class="sele_li" v-for="(item,index) in store.state.addressList" :key="index">
					<view class="user_xx">
						<span class="user_name">{{item.username}}</span>&nbsp; &nbsp;{{item.phone}}
						<view class="tip" v-if="item.mainContact">
							默认
						</view>
					</view>
					<view class="add_ed">
						<view class="">
							{{item.province}}{{item.city}}{{item.area}}
						</view>
						<uni-icons size="24" color="#666" type="compose" @click="editItem(item)"></uni-icons>
					</view>
					<view class="text">
						{{item.address}}
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="active_Btn">
			<view class="btn_logout">
				<button type="primary" size="small" class="onlogout" @click='onaddAdress'>
					添加地址
				</button>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		ref,
		onMounted
	} from "vue";
	import { onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
	import store from '@/store_network/index.js'
	const page = ref(1)
	// 新增地址
	const onaddAdress = () => {
		uni.navigateTo({
			url: "/pages_network/user/edaddress"
		})
	}
	// 下拉刷新
	onPullDownRefresh(async () => {
		page.value = 1
		store.commit('setAddressList', [])
		store.commit('setTotal', 0)
		await store.dispatch('seleAddress', 1)
		uni.stopPullDownRefresh()
	})
	// 编辑地址
	const editItem = (item) => {
		uni.navigateTo({
			url: '/pages_network/user/edaddress?item=' + JSON.stringify(item)
		})
	}
	// 触底加载更多
	onReachBottom(() => {
		if (store.state.total > store.state.addressList.length) {
			page.value = page.value + 1
			// 获取地址列表
			store.dispatch('seleAddress', page.value)
		}
	})
	onMounted(() => {
		// 获取地址列表
		store.dispatch('seleAddress', page.value)
	})
</script>

<style lang="scss" scoped>
	.address_main {
		background-color: #f6f7fa;
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;

		/* #endif */
		.void_show {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			padding-top: 40rpx;

			.tip {
				color: #ccc;
				font-size: 24rpx;
			}
		}

		.sele_ul {
			width: 100%;
			background-color: #f6f7fa;
			height: calc(100% - 120rpx);

			::-webkit-scrollbar {
				width: 0;
				height: 0;
				-webkit-appearance: none;
				color: transparent;
				display: none;
			}

			.sele_ul_item {
				background-color: #f6f7fa;
				padding: 30rpx;
				display: flex;
				flex-direction: column;
				row-gap: 24rpx;
				padding-bottom: 200rpx;

				.sele_li {
					background-color: #fff;
					border-radius: 4rpx;
					padding: 24rpx;
					font-size: 28rpx;
					box-shadow: 0 0 10rpx 2rpx #eee;
					display: flex;
					flex-direction: column;
					row-gap: 4rpx;

					.user_xx {
						font-size: 28rpx;
						display: flex;
						align-items: center;
						// margin-bottom: 8rpx;

						.tip {
							border: 1rpx solid #00c0c0;
							margin-left: 30rpx;
							border-radius: 4rpx;
							padding: 2rpx 6rpx;
							color: #00c0c0;
							font-size: 24rpx;
						}

						.user_name {
							font-weight: bold;
						}
					}

					.add_ed {
						display: flex;
						justify-content: space-between;
						align-items: center;
						// margin-bottom: 8rpx;
					}

					.text {
						color: #000;
						width: 90%;
						white-space: pre-wrap;
					}
				}
			}

		}

		.active_Btn {
			background-color: #fff;
			position: fixed;
			bottom: 0;
			padding: 30rpx 0 40rpx;
			width: 100%;

			.btn_logout {
				margin: 0 auto;

				:deep(button:after) {
					border: none !important;
				}

				.onlogout {
					font-size: 28rpx;
					padding: 0rpx 20rpx;
					margin: 0 200rpx;
					height: 80rpx;
					border-radius: 50rpx;
					line-height: 80rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #007cff;
				}
			}
		}

	}
</style>